<template>
  <div class='swiper'>
    <mt-swipe :auto=4000 class='foodentry'>
         <mt-swipe-item :key='num' v-for='(i, num) in main.list' >
          <router-link :to="{path:'/food', query:{title: item.name}}" :key='index' v-for='(item, index) in i' >
             <div>
               <img :src="'https://fuss10.elemecdn.com/' + item.image_hash.substr(0,1) + '/' + item.image_hash.substr(1,2) + '/' + item.image_hash.slice(3) + '.jpeg'" alt="" > 
            </div> 
            <span> {{item.name}} </span>
          </router-link>
      </mt-swipe-item>   
    </mt-swipe>
  </div>
</template>

<script>
  import axios from 'axios';
  import { mapState } from 'vuex';
  export default {
    name: 'mainSwiper',
    data () {
      return {

      }
    },
    components: { },
    computed: {
      ...mapState(['main', 'position'])
    },
    methods: {

    },
    mounted () {
      // console.log(this.position)
      var that = this
      var positi = sessionStorage.getItem('id')
      if (positi) {
        var lng = (JSON.parse(positi)).lng
        var lat = (JSON.parse(positi)).lat
        getdata(lng, lat, that)
      }
      this.$watch('position', function (newVal, oldVal) {
        var lng = newVal.lng
        var lat = newVal.lat
        getdata(lng, lat, that)
      })
    }
  }
  function getdata(lng, lat, that) {
    axios.get('http://localhost:3000/swipe', {
      params: {
        latitude: lat,
        longitude: lng,
        'templates[]': 'main_template'
      }
    }).then(res => {
      var list = res.data[0].entries
      // 分页显示的数据操作
      var page = Math.ceil(list.length / 8)
      var arr = []
      for (var i = 0; i < page; i++) {
        var item = list.slice(8 * i, 8 * (i + 1))
        arr.push(item)
      }
      that.$store.commit('MAINSWIPER', arr)
    })
  }
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem.scss';
  .swiper{
    .foodentry{
      overflow: hidden;
      height: px2rem(177);
      background-color: #fff;
      text-align: center;
      .mint-swipe-item{
        position: absolute;
        width: 100%;
        height: 100%;
        a{
          position: relative;
          float: left;
          width: 25%;
          margin-top: px2rem(11);
          div{
            img{
              width: 50%;
              border-radius: 50%;
            }
          }
          span{
            color: #909090;
            margin-top: px2rem(3);
            font-size : px2rem(12);
          }
        }
      }
      .mint-swipe-indicators{
        .is-active{
          background-color: #000;
          opacity: .6;
        }
      }
    }
  }
</style>